{{define "tag.html"}}
<!DOCTYPE html>
<html lang="zh-CN" class="h-100">
  <head>
    {{template "layouts/head.html" .}}
  </head>

  <body class="d-flex flex-column h-100">
    {{template "layouts/header.html" .}}

    <main class="flex-shrink-0 main">
      <div class="container">
        <div class="tag-header">
          <h1 class="page-title">标签：{{.Tag}}</h1>
          <p class="tag-description">共找到 {{.Total}} 篇相关文章</p>
        </div>

        {{if .Posts}}
        <div class="posts-grid">
          {{range .Posts}}
          <article
            class="post-card"
            onclick="window.location.href='/post/{{.ID}}'"
          >
            <div class="post-header">
              <h2 class="post-title">
                <a href="/post/{{.ID}}" onclick="event.stopPropagation()"
                  >{{.Title}}</a
                >
              </h2>
              <div class="post-meta">
                <div class="post-meta-row">
                  <span class="post-author">
                    <i class="icon author-icon"></i>
                    {{.Author}}
                  </span>
                  <span class="post-date">
                    <i class="icon time-icon"></i>
                    {{.CreateTime.Format "2006-01-02 15:04"}}
                  </span>
                  {{if .Tags}}
                  <div class="post-tags-inline">
                    {{range .Tags}}
                    <span class="tag-inline">🏷️ {{.}}</span>
                    {{end}}
                  </div>
                  {{end}}
                </div>
                {{if .Tags}}
                <div class="post-tags-mobile">
                  {{range .Tags}}
                  <span class="tag-inline">🏷️ {{.}}</span>
                  {{end}}
                </div>
                {{end}}
              </div>
            </div>

            <div class="post-summary">{{.Summary}}</div>
          </article>
          {{end}}
        </div>

        {{if gt .Total .PageSize}}
        <div class="pagination">
          {{if gt .Page 1}}
          <a
            href="/tag/{{$.Tag}}?page={{subtract .Page 1}}"
            class="page-link prev"
          >
            <span>← 上一页</span>
          </a>
          {{end}}

          <div class="page-numbers">
            {{$currentPage := .Page}} {{$totalPages := ceil .Total .PageSize}}
            {{$startPage := max 1 (subtract $currentPage 2)}} {{$endPage := min
            $totalPages (add $currentPage 2)}} {{if gt $startPage 1}}
            <a href="/tag/{{$.Tag}}?page=1" class="page-number">1</a>
            {{if gt $startPage 2}}<span class="page-ellipsis">...</span>{{end}}
            {{end}} {{range $i := seq $startPage $endPage}} {{if eq $i
            $currentPage}}
            <span class="page-number current">{{$i}}</span>
            {{else}}
            <a href="/tag/{{$.Tag}}?page={{$i}}" class="page-number">{{$i}}</a>
            {{end}} {{end}} {{if lt $endPage $totalPages}} {{if lt $endPage
            (subtract $totalPages 1)}}<span class="page-ellipsis">...</span
            >{{end}}
            <a href="/tag/{{$.Tag}}?page={{$totalPages}}" class="page-number"
              >{{$totalPages}}</a
            >
            {{end}}
          </div>

          {{if lt .Page (ceil .Total .PageSize)}}
          <a href="/tag/{{$.Tag}}?page={{add .Page 1}}" class="page-link next">
            <span>下一页 →</span>
          </a>
          {{end}}
        </div>
        {{end}} {{else}}
        <div class="no-posts">
          <p>该标签下暂无文章。</p>
          <a href="/" class="btn btn-primary">返回首页</a>
        </div>
        {{end}}
      </div>
    </main>

    {{template "layouts/footer.html" .}} {{template "layouts/js.html" .}}

    <style>
      .tag-header {
        text-align: center;
        margin: 2rem 0;
        padding: 2rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 1rem;
        color: white;
      }

      .page-title {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
      }

      .tag-description {
        font-size: 1.1rem;
        opacity: 0.9;
        margin: 0;
      }

      .no-posts {
        text-align: center;
        padding: 4rem 2rem;
        color: #7f8c8d;
      }

      .no-posts p {
        font-size: 1.2rem;
        margin-bottom: 2rem;
      }

      .btn {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        background-color: #3498db;
        color: white;
        text-decoration: none;
        border-radius: 0.5rem;
        font-weight: 500;
        transition: all 0.3s ease;
      }

      .btn:hover {
        background-color: #2980b9;
        transform: translateY(-1px);
      }

      @media (max-width: 768px) {
        .page-title {
          font-size: 2rem;
        }

        .tag-header {
          margin: 1rem;
          padding: 1.5rem;
        }
      }
    </style>
  </body>
</html>
{{end}}
